DiscGolf.Views['characterSelection'] = Backbone.View.extend( {

    events: {
    
        'click #addCharacterButton': 'handleAddCharacterClick'
    },

    initialize: function() {

        this.characters = new DiscGolf.Collections['character']({}).fetch( { success: $.proxy( this.render, this ) } );
    },

    render: function() {

        if( this.options.hide ) { this.$el.css( { 'visibility': 'hidden', 'opacity': 0 } ); }

        this.displaySubHeader();

        this.characterContainer = this.makeEl('div').css( { 'overflow': 'auto' } ).appendTo( this.$el );

        this.createAddCharacterButton();

        return this;
    },

    addCharactersToContainer: function() {

         _.each( this.characters.models,
                 function( model, index, list ) { this.createCharacterHtml( model ); },
                 this );
        
    },

    createCharacterHtml: function( characterModel ) {

        this.characterContainer.append( this.makeEl( 'div' ).text('char') );
    },

    displaySubHeader: function() {

        if( this.characters.length ) {
            
            this.$el.append(
                this.makeEl( 'div' ).text( 'Please select a character : ' )
                                    .css( { 'font-size': '.75em',
                                            'padding-top': '1em',
                                            'color': 'white',
                                            'text-align': 'center' } ) );

        } else {
            
            this.$el.append(
                this.makeEl( 'div' ).css( { 'padding-top': '1em',
                                            'color': 'white',
                                            'text-align': 'center' } )
                                    .text( 'I was unable to find characters for this account.' ),
                this.makeEl( 'div' ).css( { 'padding': '1em', color: 'blue', 'text-align': 'center' } ).text( ';_;' ) );
        }
    },

    createAddCharacterButton: function() {

        this.addCharacterButton = 
            this.makeEl( 'div' ).text( 'Create New Character' )
                                .attr( { 'class': 'cursorHand', 'id': 'addCharacterButton', } )
                                .hover( function() { $( this ).css( { 'border': '1px solid green' } ); },
                                        function() { $( this ).css( { 'border': '1px solid white' } ); } )
                                .css( { 'color': 'green',
                                        'border': '1px solid white',
                                        'border-radius': '1em',
                                        'position': 'absolute',
                                        'font-size': '.75em',
                                        'padding': '.5em' } );

        this.buttonWrapper =
            this.makeEl('div').css( { 'position': 'relative',
                                      'margin': '1em 0em 0em .5em' } ).append(
                this.addCharacterButton ).appendTo( this.$el );

        this.displayAddCharacterButton();
    },

    displayAddCharacterButton: function() {
        
        this.centerEl( { el: this.addCharacterButton, parentEl: this.buttonWrapper } );
    },

    handleAddCharacterClick: function() {

        this.originalHeight = this.$el.height();

        this.hideCharacterSelection( { 'success': this.displayAddCharacterDialogue } );
    },

    hideCharacterSelection: function( p ) {

        this.options.hide = true;

        this.$el.hide( 'blind', null, 2000, $.proxy( p.success, this ) );
    },

    displayAddCharacterDialogue: function() {

        this.addCharacterView =
            new DiscGolf.Views['addCharacter']( {
                el: this.makeEl('div').height( this.originalHeight ).appendTo( $('body') ) } );
    },

    unHide: function( p ) {

        this.options.hide = false;

        this.$el.height( window.innerHeight - p.pageHeaderHeight )
                .css( { 'visibility': 'visible', 'display': 'block' } )
                .animate( { 'opacity': 1 }, 2000, 'swing', $.proxy( this.displayAddCharacterButton, this ) );
    }

} );
